<template>
  <div class="app-props">
    <template v-if="selections.mode === SelectionMode.File">
      <FileProps ref="filePropsRef" />
    </template>
    <template v-else-if="selections.mode === SelectionMode.Pen">
      <PenPropTabs />
    </template>
  </div>
</template>

<script lang="ts" setup>
  // import { ref, watch, nextTick } from "vue";
  import FileProps from '@/components/Meta2D/FileProps/index.vue';
  // import PenProps from './PenProps.vue';
  // import PensProps from './PensProps.vue';
  // import FilePropsCopy from './props/FilePropsCopy.vue';
  import PenPropTabs from '@/components/props/PenPropTabs.vue';
  import { useSelection, SelectionMode } from '@/services/selections';

  // const filePropsRef = ref<InstanceType<typeof FileProps>>();
  const { selections } = useSelection();
//   const data = ref({});

//   function onInit(dataPens: any) {
//     data.value = dataPens;
//     if (filePropsRef.value) {
//       filePropsRef.value.onInit(dataPens);
//     }
//   }

// // 监听器
// watch(
//   () => selections.mode,
//   (newValue) => {
//     if (newValue === SelectionMode.File) {
//       nextTick(() => {
//         if (filePropsRef.value) {
//           // 注意：这里需要确保 meta2d 在作用域内可用
//           filePropsRef.value.onInit(meta2d.data());
//         }
//       });
//     }
//   }
// );

</script>
<style lang="scss" scoped>
.app-props {
  height: calc(100vh - 74px);
  padding: 0 12px;
  background: #fff;
  border-left: 1px solid #ddd;
  overflow-y: auto;
  z-index: 2;
}
</style>